<!--
 * @Descripttion: 治欠保支统计已开工项目
 * @version:
 * @Author: zhangfan
 * @email: 2207044692@qq.com
 * @Date: 2020-07-03 14:05:06
 * @LastEditors: zhangfan
 * @LastEditTime: 2021-06-21 15:17:35
-->

<template>
  <div class="container">
    <div>
      <div class="commomPaddingComtainer">
        <el-row class="toolbar searchInputWidth" style="padding-bottom: 0">
          <el-form
            :inline="true"
            :model="filterField"
            ref="searchConditions"
            class="clearfix"
          >
            <el-form-item class="fr setRule">
              <colSetup
                :tableColList="colSetupStartedTableCol"
                @getSelectMenuId="getSelectStartedMenuIds"
              />
            </el-form-item>
            <el-form-item class="fr exportExcel">
              <el-button
                class="commonBut saveBtn funComBut"
                icon="icon iconfont icondaochu"
                @click="toExportStartedExcel"
              >
                <span class="opetareText">导出报表</span>
              </el-button>
            </el-form-item>
          </el-form>
        </el-row>

        <!-- 表格 :max-height="height_top"-->
        <div>
          <el-table
            :data="startedTabledate"
            v-loading="loadingStarted"
            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
            lazy
            :load="load"
            row-key="id"
            border
            :max-height="tableHeight"
            @filter-change="handleFilterChange"
            ref="tableBox1"
            @header-dragend="handleDragend"
          >
            <my-column
              v-for="(item, index) in StartedTableCol"
              :key="index"
              :col="item"
            ></my-column>
            <!-- 表格数据为空时，页面显示 -->
            <div slot="empty" v-show="isShowStarted">
              <emptyTable emptyText="暂无相关数据"></emptyTable>
            </div>
          </el-table>
        </div>
      </div>
    </div>
    <exportExcel
      :rowDimensionList="exportTableCol"
      :mark="mark"
      :rowDimensionSelcted="rowDimensionSelcted"
      @getExportList="getExportList"
      v-if="isShowDialog"
      :dialogFormVisible="isShowExcel"
      @closeDialog="hiddenDialog"
    ></exportExcel>
  </div>
</template>

<script>
import exportExcel from '@/components/publicCom/exportExcel2'
import MyColumn from './MyColumn'
import common from '../../kits/common'
export default {
  name: 'allItem',
  components: {
    exportExcel,
    MyColumn,
  },
  data() {
    return {
      tableHeight: null,
      showExcel: false,
      loadingStarted: true, //已开工项目loading
      winHeight: window.innerHeight,
      height_top: 630,
      isShowDialog: false,
      isShowExcel: false,
      mark: '',
      StartedTableCol: [
        {
          id: '1',
          prop: 'date',
          isShow: true,
          label: '统计维度',
          disabled: true,
          children: [
            {
              id: '11',
              prop: 'areaName',
              isShow: true,
              disabled: true,
              label: '区域',
            },
            {
              id: '12',
              prop: 'industryName',
              disabled: true,
              isShow: true,
              label: '行业',
            },
            {
              id: '13',
              prop: 'investmentName',
              disabled: true,
              isShow: true,
              label: '投资类别',
            },
          ],
        },
      ],
      tablefilterField: {
        areaId: '',
        industryId: 'total',
        investment: 'total',
      },
      rowDimensionSelcted: 'area',
      exportTableCol: [
        {
          type: 'area',
          name: '只导出按地区维度统计',
        },
        {
          type: 'areaIndustry',
          name: '同时导出按地区和行业维度统计',
        },
        {
          type: 'areaIndustryInvestment',
          name: '同时导出地区、行业和投资类型维度统计',
        },
      ],
      exportIndustrySupervisor: [
        {
          type: 'area',
          name: '只导出按地区维度统计(管辖行业)',
        },
        {
          type: 'areaIndustryInvestment',
          name: '同时导出按地区维度(管辖行业)、投资类别维度统计',
        },
      ],
      colSetupStartedTableCol: [],
      startedTabledate: [],
      colSetupStartedTotle: [],
      isShowStarted: false,
      //搜索条件
      filterField: {},
      requestUrl: '/api-s/cs/insurepay/listbyall',
      selectProps: [],
    }
  },
  mounted() {
    this.getStartedTableCol()
    this.ishangyezhuguang()
    this.getTableListData()
    //挂载浏览器高度获取方法
    // const that = this;
    // window.onresize = () => {
    //   return (() => {
    //     that.winHeight = window.innerHeight;
    //     that.height_top = that.winHeight - 360;
    //   })();
    // };
    // that.height_top = that.winHeight - 332;
    this.$nextTick(function () {
      this.tableHeight = window.innerHeight - 260
      // 监听窗口大小变化
      let self = this
      window.onresize = function () {
        self.tableHeight = window.innerHeight - 260
      }
    })
  },
  methods: {
    handleFilterChange(value) {
      if (value.industryName) {
        if (value.industryName.toString()) {
          this.tablefilterField.industryId = value.industryName.toString()
        } else {
          this.tablefilterField.industryId = 'total'
        }
      } else if (value.investmentName) {
        if (value.investmentName.toString()) {
          this.tablefilterField.investment = value.investmentName.toString()
        } else {
          this.tablefilterField.investment = 'total'
        }
      }
      this.getTableDate()
    },
    getTableDate() {
      this.axios({
        method: 'post',
        url: '/api-s/cs/insurepay/filter',
        data: this.tablefilterField,
      })
        .then((response) => {
          this.startedTabledate = response.data.result
        })
        .catch((error) => {})
    },
    /**
     * @description: 判断是否是行业主管
     */
    ishangyezhuguang() {
      if (this.$store.state.userType == 'DIRECTOR') {
        this.rowDimensionSelcted = 'area'
        this.exportTableCol = this.exportIndustrySupervisor
      }
    },
    /**
     * @description: 获取选中的列
     */
    getSelectStartedMenuIds(val) {
      this.StartedTableCol = val
      this.getSelectProps(this.StartedTableCol)
    },
    /**
     * @description: 打开导出报表弹框
     */
    toExportStartedExcel() {
      this.isShowDialog = true
      this.isShowExcel = true
      // this.getExportList(this.selectProps)
    },
    hiddenDialog(val) {
      this.isShowDialog = false
      this.isShowExcel = false
    },
    /**
     * @description: 导出报表
     */
    getExportList(obj) {
      const vm = this
      let arrval = []
      let arrvalTwo = []
      arrval = vm.selectProps.slice(4)
      arrvalTwo = vm.colSetupStartedTotle.slice(1)
      arrvalTwo.forEach((item, index) => {
        let propType = item.prop
        arrval.remove(propType)
      })
      if (!vm.selectProps.length) {
        this.$message({
          type: 'warning',
          message: '导出字段为空!',
        })
      } else {
        vm.isShowExcel = false
        window.location.href =
          common.commonApi +
          'api-s/cs/insurepay/export?type=' +
          'INSUREPAY_START' +
          '&field=' +
          arrval +
          '&industry=' +
          obj.industryNameSelcted +
          '&invest=' +
          obj.investmentNameSelcted +
          '&access_token=' +
          localStorage.getItem('access_token')
      }
    },
    /**
     * @description: 懒加载表格的子节点数据
     */
    load(tree, treeNode, resolve) {
      const vm = this
      let industryValue
      if (vm.$store.state.userType == 'DIRECTOR') {
        industryValue = vm.$store.state.industryId
      } else {
        industryValue = tree.industryId || ' '
      }
      let industryId
      if (tree.industryId) {
        industryId = tree.industryId
      } else {
        industryId = 'all'
      }
      let investment
      if (tree.industryId) {
        investment = 'all'
      } else if (this.tablefilterField.investment) {
        investment = this.tablefilterField.investment
      } else {
        industryId = 'total'
      }
      this.axios({
        method: 'post',
        url: '/api-s/cs/insurepay/filter',
        data: {
          id: tree.id,
          areaId: tree.areaId,
          isStats: tree.isStats,
          industry: industryValue,
          industryId: industryId,
          investment: investment,
        },
      }).then((res) => {
        let tableArray = res.data.result
        tableArray.forEach((item, index) => {
          delete item.areaName
        })
        resolve(res.data.result)
        if (res.data.result.length == 0) {
          this.$message({
            type: 'error',
            message: '本节点以下暂无子节点!',
          })
        }
      })
    },
    /**
     * @description: 获取统计全部项目表头数据
     */
    getStartedTableCol() {
      const vm = this
      vm.axios({
        method: 'post',
        url: '/api-s/dimension/head?type=' + 'INSUREPAY_START',
      })
        .then((response) => {
          var arr1 = []
          arr1 = response.data.result
          vm.StartedTableCol = vm.StartedTableCol.concat(arr1)
          vm.getSelectProps(vm.StartedTableCol)
          // vm.exportTableCol = JSON.parse(JSON.stringify(vm.StartedTableCol));
          vm.colSetupStartedTableCol = JSON.parse(
            JSON.stringify(vm.StartedTableCol)
          )
          vm.colSetupStartedTotle = JSON.parse(
            JSON.stringify(vm.StartedTableCol)
          )
        })
        .catch((error) => {
          vm.$message({
            showClose: true,
            duration: 3000,
            message: '获取已开工项目表头失败',
            type: 'error',
          })
        })
    },
    /**
     * @description: 获取表格数据
     */
    getTableListData() {
      const vm = this
      vm.axios({
        method: 'post',
        url: '/api-s/cs/insurepay/listbyall',
      })
        .then((response) => {
          vm.startedTabledate = response.data.result
          vm.loadingStarted = false
          if (vm.startedTabledate.length < 1) {
            vm.isShowStarted = true
          }
        })
        .catch((error) => {
          vm.$message({
            showClose: true,
            duration: 3000,
            message: '获取已开工项目数据失败',
            type: 'error',
          })
        })
    },
    getSelectProps(tableCol) {
      let propArr = []
      tableCol.forEach((v) => {
        if (v.isShow) {
          propArr.push(v.prop)
          v.children.forEach((item) => {
            if (item.isShow) {
              propArr.push(item.prop)
            }
          })
        }
      })
      this.selectProps = JSON.parse(JSON.stringify(propArr))
    },
  },
}
</script>

<style scoped lang="less">
.container {
  .commomPaddingComtainer {
    padding-top: 24px;
  }
  .mainCon {
    top: 0;
  }
}

.commomPadding {
  padding-top: 0;
  /deep/ .imgPrev {
    width: 50px;
  }
}

.exportExcel,
.setRule {
  position: absolute;
  top: -60px;
}

.exportExcel {
  right: -24px;
  margin-right: 0 !important;
}

.setRule {
  right: 88px;
}
.iconxianshi {
  cursor: pointer;
}
/deep/ .el-table th.is-hidden > *,
/deep/ .el-table td.is-hidden > * {
  visibility: visible;
}
</style>
